<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>P171 动手实践：购物车</title>
    <style>
        .cart {
            width: 700px;
            padding: 0 10px 10px;
            border: 1px solid #D5E5F5;
        }

        .cart-title {
            margin-bottom: 10px;
            font-size: 14px;
            border-bottom: 1px solid #AED2FF;
            line-height: 30px;
            height: 30px;
            font-weight: 700;
            text-indent: 15px;
            color: #333;
            font-family: 'Microsoft YaHei';
        }

        .cart-table {
            width: 100%;
            margin: 0 auto;
            border-collapse: collapse;
            font-size: 12px;
            font-family: Verdana, "Microsoft YaHei";
            color: #333;
        }

        .cart-table th {
            border-bottom: 2px solid #B2D1FF;
            font-weight: normal;
            height: 35px;
            line-height: 23px;
        }

        .cart-item {
            background-color: #FAFCFF;
            border-bottom: 1px dotted #84B3FD;
        }

        .cart-item td {
            height: 55px;
            text-align: center;
        }

        .cart-item .cart-txt-left {
            text-align: left;
        }

        .cart-name {
            color: #3366D4;
            font-weight: bold;
        }

        .cart-subtotal {
            color: #FF3334;
            font-weight: bold;
        }

        .cart-reduce,
        .cart-add {
            display: inline-block;
            width: 16px;
            height: 16px;
            line-height: 16px;
            color: #FFF;
            background-color: #BDBDBD;
            border: 0;
            cursor: pointer;
            border-radius: 2px;
            font-family: 'Arial';
            font-size: 13.3333px;
        }

        .cart-reduce:hover,
        .cart-add:hover {
            background-color: #FF9900;
        }

        .cart-num {
            margin: 5px;
            width: 35px;
            text-align: center;
            height: 20px;
            line-height: 20px;
            padding: 0 3px;
            display: inline-block;
            background: #fff;
            border: 1px solid #bbb
        }

        .cart-del,
        .cart-all {
            color: #3366D4;
        }

        .cart-del:hover,
        .cart-all:hover {
            text-decoration: underline;
            cursor: pointer
        }

        .cart-bottom {
            height: 55px;
            text-align: right
        }

        .cart-bottom .cart-all {
            position: relative;
            top: 1px
        }

        .cart-total-price {
            color: #FF3334;
            font-weight: bold;
            font-size: 16px;
        }

        .cart-bottom-btn {
            color: #FFF;
            font-size: 14px;
            font-weight: 600;
            cursor: pointer;
            margin: 0 20px;
            background: #FE8502;
            border: 1px solid #FF6633;
            border-radius: 5px 5px 5px 5px;
            padding: 6px 12px;
        }

        .cart-bottom-btn:hover {
            background: #FF6600;
        }
    </style>
</head>

<body>
    <div class="cart">
        <div class="cart-little">我的购物车</div>
        <table class="cart-table">
            <tr>
                <th><span class="cart-all">全选</span></th>
                <th>商品</th>
                <th>单价</th>
                <th>数量</th>
                <th>小计</th>
                <th>操作</th>
            </tr>
            <tr class="cart-item">
                <td><input class="cart-check" type="checkbox" checked></td>
                <td><span class="cart-name">Loading...</span></td>
                <td><span class="cart-price">0</span></td>
                <td>
                    <span class="cart-reduce">-</span>>
                    <span class="cart-num">0</span>>
                    <span class="cart-add">+</span>>
                </td>
                <td><span class="cart-subtotal">0</span></td>
                <td><span class="cart-del">删除</span></td>
            </tr>
            <tr class="cart-bottom">
                <td colspan="6">
                    <span>已选择<span class="cart-total-num">0</span>件商品</span>
                    <span>总计<span class="cart-total-price">0</span></span>
                    <span>提交订单</span>
                </td>
            </tr>
        </table>
    </div>
    <script>
        (function (window) {
            var ShopCart = function (prefix, defCart) {
                Find.prototype.prefix = prefix;
                var cart = new Cart(document.getElementsByClassName(prefix)[0]);
                for (var i in defCart) {
                    cart.add(defCart[i]);
                }
                cart.updateTotal();
            };
            function Cart(obj) {
                this.items = [];
                var find = new Find(obj);
                this.all = find.className('all');
                this.bottom = find.className('bottom');
                this.num = find.className('total-num');
                this.price = find.className('total-price');
                this.tmp = find.className('item');
                this.tmp.parentNode.removeChild(this.tmp);
                var cart = this;
                this.all.onclick = function () {
                    cart.checkAll();
                };
            }
            Cart.prototype = {
                add: function (data) {
                    var tmp = this.tmp.cloneNode(true);
                    var item = new Item(tmp, data);
                    var cart = this;
                    item.check.onclick = function () {
                        cart.updateTotal();
                    };
                    item.add.onclick = function () {
                        item.num.textContent = ++item.data.num;
                        item.updateSubtotal()
                        cart.updateTotal();
                    };
                    item.reduce.onclick = function () {
                        if (item.data.num > 1) {
                            item.num.textContent = --item.data.num;
                            item.updateSubtotal();
                            cart.updateTotal();
                        } else {
                            alert('至少选择1件，如果不需要，请直接删除');
                        }
                    };
                    item.del.onclick = function () {
                        if (confirm('您确定要删除此商品吗？')) {
                            tmp.parentNode.removeChild(tmp);
                            cart.del(item);
                            cart.updateTotal();
                        }
                    };
                    this.bottom.before(tmp);
                },
                del: function (item) {
                    for (var i in this.items) {
                        if (this.items[i] === item) {
                            delete this.items[i];
                        }
                    }
                },
                updateTotal: function () {
                    var num = 0, price = 0;
                    for (var i in this.items) {
                        var item = this.items[i];
                        if (item.check.checked) {
                            num += item.data.num;
                            price += item.data.num * item.data.price;
                        }
                    }
                    this.num.textContent = num;
                    this.price.textContent = price.toFixed(2);
                },
                checkAll: function () {
                    for (var i in this.items) {
                        this.items[i].check.checked = true;
                    }
                    this.updateTotal();
                }
            };
            function Item(tmp, data) {
                var find = new Find(tmp);
                this.check = find.className('check');
                this.name = find.className('name');
                this.price = find.className('price');
                this.num = find.className('num');
                this.add = find.className('add');
                this.reduce = find.className('reduce');
                this.subtotal = find.className('subtotal');
                this.del = find.className('del');
                this.data = data;
                this.name.textContent = data.name;
                this.price.textContent = data.price.toFixed(2);
                this.num.textContent = data.num;
            }
            Item.prototype = {
                updateSubtotal: function () {
                    this.subtotal.textContent = (this.data.num * this.data.price).toFixed(2);
                }
            };
            function Find(obj) {
                this.obj = obj;
            }
            Find.prototype = {
                prefix: '',
                className: function (className) {
                    return this.obj.getElementsByClassName(this.prefix + '-' + className)[0];
                }
            };
            window['ShopCart'] = ShopCart;
        })(window);
    </script>
    <script>
        ShopCart('cart', [
            { name: 'JavaScript实战', price: 45.8, num: 1 },
            { name: 'PHP基础案例教程', price: 49.8, num: 2 },
            { name: 'HTML+CSS网页制作', price: 45.2, num: 5 },
            { name: 'Java基础入门', price: 45, num: 8 },
        ]);
    </script>
    <a href="../首页/page07.html">
        <h2>返回上一页面</h2>
    </a>
</body>

</html>